<template>
  <div id="app">
    <el-container class="container1">
      <el-header style="padding:0px 0px">
        <Header/>
      </el-header>
      <el-container>
        <!-- <el-aside width="70px">
          <Aside/>
        </el-aside>-->
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
      <!-- <el-footer height="4%">
        <Footer msg="我是JIO"/>
      </el-footer> -->
    </el-container>
  </div>
</template>
<script>
// import Aside from '@/components/layout/Aside.vue'
import Footer from '@/components/layout/Footer.vue'
import Header from '@/components/layout/Header.vue'
export default {
  name: 'app',
  components: {
    // Aside,
    Footer,
    Header
  },
  beforeCreate: () => {
    document.getElementsByTagName('body')[0].className = 'bodyWeb'
    document.getElementsByTagName('html')[0].className = 'htmlWeb'
  }
}
</script>
<style lang="stylus">
#app
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  width 100%
  height 100%
.bodyWeb
  margin 0px
  width 100%
  height 100%
.htmlWeb
  height 100%
.container1
  height 100%
.el-header, .el-footer
  background-color #67C23A
  color #561
  text-align center
.el-aside
  background-color #E6A23C
  color #333
  text-align left
.el-main
  background-color #E9EEF3
  color #333
  text-align center
  padding 20px 0px 0px 0px!important
  // padding-top 20px !important
</style>
